@use '@angular/material' as mat;

:host {
  // @apply inline-block; // Why inline-block?
  @apply block;
  // height: 100%;
  // overflow: auto;

  &.ngm-fullscreen {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;

    gridster {
      width: 100% !important;
      height: 100% !important;
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      transform: none !important;
      overflow: hidden;
    }
  }

  &:not(.ngm-fullscreen) {
    .ngm-story__widget:hover {
      // z-index: 1000 !important;
      .ngm-story-widget__fab-menu {
        visibility: visible;
      }
    }
  }

  &.grid-layout__fit {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    .ngm-story-point__page {
      width: 100%;
      height: 100%;
    }
  }
  &.grid-layout__fixed {

  }
  &.grid-layout__vertical-fixed {
    width: 100%;
    .ngm-story-point__page {
      width: 100%;
      .ngm-story__layout {
        width: 100%;
      }
    }
  }
  &.grid-layout__horizontal-fixed {
    height: 100%;
    .ngm-story-point__page {
      height: 100%;
      .ngm-story__layout {
        height: 100%;
      }
    }
  }

  /* focusing */
  &.ngm-story__focus {
    @apply bg-neutral-300 dark:bg-neutral-700;
    
    ::ng-deep {
      .ngm-story__widget:not(.ngm-story__focus) {
        opacity: 0.35;
      }
      .ngm-story__widget.ngm-story__focus {
        .ngm-story-widget__content {
          background-color: var(--ngm-color-surface-container);
          @include mat.elevation(8);
        }
      }
    }
  }
}

gridster {
  background: unset;

  /* 移动端不使用 gridster 本身的 scroll y */
  &.mobile {
    overflow-y: hidden;
    height: unset;
  }

  gridster-item.ngm-story__widget {
    overflow: visible;
    background: unset;

    .ngm-story-widget {
      position: absolute;
      width: 100%;
      height: 100%;
    }

    .ngm-drag-handler {
      position: absolute;
      top: 0;
      height: 1rem;
      width: 4rem;
      left: calc(50% - 2rem);
      z-index: 3;
    }

    &.editable.active {
      z-index: 1000 !important;
    }
  }
}

.ngm-story__layout.mobile {
  flex: 1;
  height: 100%;
  max-width: 100%;

  ::ng-deep {
    .ngm-story-widget {
      width: 100%;
      max-width: 100%;
      margin-bottom: 1rem;

      .ngm-story-widget__content.ngm-story-widget__card {
        min-height: 300px;
      }
      &.ngm-fullscreen {
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
      }
      .ngm-story-widget__content {
        overflow: visible;
      }

      .ngm-story-widget__fab-menu {
        top: -40px;
        right: 0;
      }
    }
  }
}

.ngm-story-point__responsive {
  flex: 1;
  width: 100%;
}

.ngm-story__layout-widget-size.ngm-story__layout-widget-size-show {
  @apply inline-block;
}

.ngm-story-point__page {
  /**
   * @todo Why use inline-block ???
   */
  @apply inline-block;
      
  /* page size styling */
  &.ngm-story-point__size-a4 {
    @include mat.elevation(8);
    margin: auto;
    padding: 1rem;
    width: 1240px;
    height: 1754px;

    &.ngm-story-point__size-continuous-height {
      height: auto;
    }
  }
}

.ngm-story-point__quick-start .container {
  background-color: var(--ngm-color-surface-container);
  .ngm-story__quick-start-widget {
    @apply flex-1 min-w-[200px] text-2xl p-8 flex justify-center items-center cursor-pointer rounded-lg whitespace-nowrap border-2 border-dashed
      active:shadow-lg;
    @apply sm:p-16;
    background-color: var(--ngm-color-surface);
    border-color: var(--ngm-color-outline);

    &:hover {
      background-color: var(--ngm-color-surface-container-high);
      font-weight: 600;
    }
  }
}